import {Component, VueComponent, Hook, Mut, Link} from "vue3-oop";
import styles from "./index.module.scss";
import {NButton, NCard, NIcon, NSpace, NTag, NForm, NFormItem, NInput} from "naive-ui";
import {Search} from "@vicons/ionicons5";
import IndexService from './index.service'

import DynaTabsPanel from "@/components/panel/DynaTabsPanel"


@Component()
export default class UserDetailView extends VueComponent {

  constructor(
    private service: IndexService,
  ) {
    super()
  }

  @Hook("Mounted")
  onMounted(){
    this.service.loadUserData();
  }

  render() {

    return (
      <NCard
        class={[styles.user_detail_view]}
        header-style={{padding: '10px'}}
        content-style={{padding: '10px'}}
      >
        <div
          class={[styles['toolbar']]}
        >
          <div class={[styles['toolbar_left']]}><NSpace size="small"><NTag
            bordered={false}
            size={'large'}
            style={{fontSize:'18px'}}
            color={{color:'whitesmoke'}}
          >
            {{ avatar: ()=>(<NIcon><Search/></NIcon>), default: ()=>('用户详情') }}
          </NTag></NSpace></div>
          <div class={[styles['toolbar_middle']]}><NSpace size="small"></NSpace></div>
          <div class={[styles['toolbar_right']]}><NSpace size="small">
            {!this.service.state.editable && <NButton onClick={this.service.toggleEditable}>编辑</NButton>}
            {this.service.state.editable && <NButton onClick={this.service.saveEditData}>保存</NButton>}
            {this.service.state.editable && <NButton onClick={this.service.toggleEditable}>取消</NButton>}
          </NSpace></div>
        </div>
        <NForm labelPlacement={"left"} inline={true} disabled={!this.service.state.editable}>
          <NFormItem label={"ID"}><NInput value={this.service.state.editData.id} disabled onUpdateValue={(value)=>{this.service.state.editData.id=value}}/></NFormItem>
          <NFormItem label={"姓名"}><NInput value={this.service.state.editData.personname} onUpdateValue={(value)=>{this.service.state.editData.personname=value}}/></NFormItem>
          <NFormItem label={"账号"}><NInput value={this.service.state.editData.username} onUpdateValue={(value)=>{this.service.state.editData.username=value}}/></NFormItem>
          <NFormItem label={"租户"}><NInput value={this.service.state.editData.tenantId} onUpdateValue={(value)=>{this.service.state.editData.tenantId=value}}/></NFormItem>
        </NForm>

        <DynaTabsPanel
          showTitle={true}
          icon={"Key20Filled"}
          title={"权限配置"}
          tablePaneList={[
            this.service.allcRoleService.panelProps,
            this.service.allcPrmsService.panelProps,
            this.service.validPrmsService.panelProps
          ]}
        />

      </NCard>
    )
  }
}